<!--
 * @Author: 江沅锋 yuanfeng.jiang@symbio.com.cn
 * @Date: 2024-12-19 15:31:27
 * @LastEditors: 江沅锋 yuanfeng.jiang@symbio.com.cn
 * @LastEditTime: 2024-12-30 15:05:20
 * @FilePath: \snow-frontend-pc\src\views\projects\procurement\centralizedPurchasing\components\associatedItem.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <el-dialog
      v-model="visible"
      title="关联项目"
      destroy-on-close
      width="1600px"
      @close="handleCancel"
    >
      <div class="dialog">
        <el-skeleton :rows="8" :loading="loading" animated :height="'200px'">
        </el-skeleton>
        <el-table
          :data="state.projectList"
          height="500px"
          stripe
          v-show="!loading"
          style="width: 100%; margin-top: 20px"
          row-key="id"
          ref="tableDataRef"
          :header-cell-style="{
            background: '#F7F9FD',
            color: '#000',
            height: '48px',
            borderTop: '1px soild #E4E8F2'
          }"
        >
          <template #empty>
            <el-empty :image-size="150" description="暂无数据"></el-empty>
          </template>
          <el-table-column type="index" label="序号" width="50" fixed="left">
            <template v-slot="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="项目名称"
            prop="projectName"
            width="230"
            fixed="left"
          ></el-table-column>
          <el-table-column
            label="项目编号"
            prop="projectNum"
            width="200"
            fixed="left"
          ></el-table-column>
          <el-table-column
            label="项目标段名称"
            prop="projectLotName"
            width="200"
          ></el-table-column>
          <el-table-column
            label="项目立项批准金额（万元）"
            prop="approvalAmount"
            width="190"
          ></el-table-column>
          <el-table-column
            label="项目标段预算金额（万元）"
            prop="projectLotAmount"
            width="190"
          ></el-table-column>
          <el-table-column
            label="采购技术方案初审时间"
            prop="purchasePlanFirstReviewTime"
            width="160"
          ></el-table-column>
          <el-table-column
            label="采购技术方案定稿时间"
            prop="purchasePlanFinalVersionTime"
            width="160"
          ></el-table-column>
          <el-table-column
            label="创建人"
            prop="createUserName"
            width="140"
          ></el-table-column>
          <el-table-column
            label="创建时间"
            prop="createTime"
            width="160"
          ></el-table-column>
          <el-table-column label="操作" width="260" fixed="right">
            <template #default="{ row }">
              <el-popconfirm
                :title="`是否取消项目：${row.projectName}的关联？`"
                @confirm="deleteClick(row)"
              >
                <template #reference>
                  <el-button type="text"> 取消关联 </el-button>
                </template>
              </el-popconfirm>
              <el-button type="text" @click="editClick(row)">
                编辑采购技术方案审批时间
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleCancel"> 取消 </el-button>
        </span>
      </template>
    </el-dialog>
    <el-dialog
      v-model="editVisible"
      title="编辑采购技术方案审批时间"
      destroy-on-close
      width="700px"
      @close="editCancel"
    >
      <div class="dialog">
        <el-form
          :inline="true"
          :model="formInline"
          :rules="rules"
          :label-position="'right'"
          ref="formRef"
          class="demo-form-inline"
          :label-width="'200px'"
        >
          <el-row :gutter="20">
            <el-col :span="20">
              <el-form-item
                label="采购技术方案初审时间："
                prop="purchasePlanFirstReviewTime"
              >
                <el-date-picker
                  class="width-custom"
                  v-model="formInline.purchasePlanFirstReviewTime"
                  type="date"
                  placeholder="请选择时间"
                />
              </el-form-item>
            </el-col>
            <el-col :span="20">
              <el-form-item
                label="采购技术方案定稿时间："
                prop="purchasePlanFinalVersionTime"
              >
                <el-date-picker
                  class="width-custom"
                  v-model="formInline.purchasePlanFinalVersionTime"
                  type="date"
                  placeholder="请选择时间"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editCancel"> 取消 </el-button>
          <el-button type="primary" :loading="btnLoading" @click="editSure">
            保存
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, defineProps, defineEmits, watch } from "vue";
import moment from "moment";
import {
  alreadyMappingList,
  deleteMapping,
  updateMapping
} from "/@/api/projects";
import NotifMessage from "/@/utils/message/notification";
const formRef = ref<HTMLFormElement | null>(null) as any;
const tableDataRef = ref<HTMLElement | null>(null) as any;
const emit = defineEmits(["submit"]);
const visible = ref(false);
const editVisible = ref(false);
const btnLoading = ref<boolean>(false);
const loading = ref<boolean>(false);
const pitchItem = ref<any>({});
let state = reactive({
  projectList: []
}) as any;
let formInline = reactive({
  purchasePlanFirstReviewTime: "",
  purchasePlanFinalVersionTime: ""
}) as any;
const rules = {
  purchasePlanFirstReviewTime: [
    { required: true, message: "请选择采购技术方案初审时间", trigger: "change" }
  ],
  purchasePlanFinalVersionTime: [
    { required: true, message: "请选择采购技术方案定稿时间", trigger: "change" }
  ]
};
const props = defineProps({
  showDialog: {
    type: Boolean,
    default: false
  },
  pitchDetail: {
    type: Object,
    default: () => {}
  }
});
watch(
  () => props.showDialog,
  newVal => {
    visible.value = newVal;
    if (newVal) {
      initData();
    }
  }
);
const initData = () => {
  getMappingList();
};
const getMappingList = async () => {
  loading.value = true;
  const res = (await alreadyMappingList({
    id: props.pitchDetail.id
  })) as any;
  loading.value = false;
  const { code, data } = res;
  if (code === 200) {
    state.projectList = data;
  }
};
const deleteClick = (row: any) => {
  deleteMapping({
    mappingId: row.id
  }).then((res: any) => {
    if (res.code === 200) {
      emit("submit", "update");
      getMappingList();
      NotifMessage.success("操作成功");
    }
  });
};
const handleCancel = () => {
  emit("submit", "cancel");
};
const editClick = (row: any) => {
  editVisible.value = true;
  formInline.purchasePlanFirstReviewTime =
    row.purchasePlanFirstReviewTime || "";
  formInline.purchasePlanFinalVersionTime =
    row.purchasePlanFinalVersionTime || "";
  pitchItem.value = row;
};
const editSure = async () => {
  const isValid = await new Promise(resolve => formRef.value.validate(resolve));
  if (!isValid) return;
  const { purchasePlanFirstReviewTime, purchasePlanFinalVersionTime } =
    formInline;
  updateMapping({
    mappingId: pitchItem.value.id, //映射关系ID
    purchasePlanFirstReviewTime: purchasePlanFirstReviewTime
      ? moment(purchasePlanFirstReviewTime).format("YYYY-MM-DD")
      : "", //初审时间
    purchasePlanFinalVersionTime: purchasePlanFinalVersionTime
      ? moment(purchasePlanFinalVersionTime).format("YYYY-MM-DD")
      : "" //定稿时间
  }).then((res: any) => {
    if (res.code === 200) {
      getMappingList();
      editVisible.value = false;
      NotifMessage.success("操作成功");
    }
  });
};
const editCancel = () => {
  editVisible.value = false;
};
</script>
<style scoped lang="scss">
.dialog {
  width: 100%;
  display: flex;
  border-top: 1px solid #e4e7ed;
  box-sizing: border-box;
  padding: 20px;
}
</style>
